<template>
  <div v-if="scheduleList.length" class="game_schedule">
    <div class="model_title">日程安排</div>
    <div class="model_content schedule_content">
      <van-steps direction="vertical" :active="-1">
        <van-step v-for="item in scheduleList" :key="item.id">
          <div class="schedule_time">{{ item.time && item.time.replace('T', ' ') }}</div>
          <div class="gl_px_10 gl_py_10 gl_mr_10" style="background: #f1f6ff;">
            <div class="schedule_event">
              <span>事件：</span>
              <span>{{ item.name }}</span>
            </div>
            <div class="schedule_site">
              <span>地点：</span>
              <span>{{ item.location }}</span>
            </div>
            <div v-if="item.comment" class="schedule_remark">
              <span>注意：</span>
              <span>{{ item.comment }}</span>
            </div>
          </div>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>
<script>
import {
  api_GET_EventsManagementCompetitionSchedule
} from '@/extend/api/gameswaggerApi/app';
export default {
  name: 'Schedule',
  props: {
    gameId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      scheduleList: []
    };
  },
  watch: {
    gameId() {
      this.getScheduleList();
    }
  },
  created() {
    this.getScheduleList();
  },
  methods: {
    // 获取赛事日程列表
    getScheduleList() {
      if (!this.gameId) return;
      api_GET_EventsManagementCompetitionSchedule({ competitionId: this.gameId }).then(res => {
        this.scheduleList = res.items || [];
        console.log(this.scheduleList);
      });
    }
  }
};
</script>
<style>
.schedule_content {
  padding: 5px 0;
}
.schedule_content .van-step__line {
  background: #fff;
}
.game_schedule .schedule_time,
.game_schedule .schedule_event,
.game_schedule .schedule_site,
.game_schedule .schedule_remark {
  font-size: 12px;
  color: #666;
}
</style>
